<template>
    <div class="container">
        <div class="text">
            <slot v-if="slots.default"></slot>
            <div v-else>{{ text }}</div>
        </div>
        <div class="icon" >
            <!-- style="color: rgb(255,1,1)" -->
            <el-icon-arrowup  :color="upIconColor" v-if="type === 'UP'"></el-icon-arrowup>
            <el-icon-arrowdown :color="downIconColor" v-else ></el-icon-arrowdown>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { useSlots } from 'vue';
const slots=useSlots()
console.log(slots)
const props = defineProps({
    type: {
        type: String,
        default: "UP"
    },
    text: {
        type: String,
        default: "默认趋势"
    },
    upIconColor: {
        type: String,
        defalut: "red"
    },
    downIconColor: {
        type: String,
        defalut: "#52c41a"
    }
})
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    align-items: center;
    .text{
        font-size: 16px;
        margin-right: 4px;
    }
    .icon {
        svg {
            width: 1em;
            height: 1em;
        }
    }
}
</style>
